<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<view class="tui-bg-box">
			<image src="../../static/images/login/bg_login.png" class="tui-bg-img"></image>
			<image :src="myImgLogo" class="tui-photo"></image>
			<view class="tui-login-name">{{myPhone}}</view>
		</view>
		<form>
			<view class="tui-login-from">
				<view class="tui-line-cell">
					<tui-icon name="people-fill" :size="20" color='#5677fc'></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" placeholder="请输入你的昵称" maxlength="30" v-model="name" type="text" />
				</view>
				<view class="tui-line-cell">
					<tui-icon name="mail" :size="20" color='#5677fc'></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" placeholder="请输入你的邮箱" maxlength="30" v-model="email" type="text" />
				</view>

				<view class="tui-line-cell-2">
					<tui-button type="green" class="btn-primary tui-btn-submit"  hover-class="btn-hover" @click="doPostEdit()">确认修改</tui-button>
				</view>
				
			</view>
		</form>
	</view>
</template>

<script>

	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	const util = require('../../utils/util.js')
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton
		},
		data() {
			return {
				disabled: false,
				btnText: "获取验证码",
				email: "",
				type: "primary",
				code: "",
				
				myId: 0,
				name: '',
				email: '',
				myImgLogo: '',
				
				//底部导航栏tabbar
				tabCur: 2,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
						{icon: "service", text: "发现", size: 24},
						{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/shop/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			getMyBaseInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
				    success: (res) => {
					//	console.log(res.data['data']);
						let resData = res.data['data'];
						this.myId = resData.id;
						this.name = resData.name;
						this.myPhone = resData.phone;
						this.mail = resData.email;
						this.myImgLogo = resData.img_logo;
					}
				});
			},
			
			
			doPostEdit: function(e) {
				let name = this.name;
				let email = this.email;
				/* if (util.isNullOrEmpty(email)) {
					this.tui.toast('请输入电子邮箱');
					return
				} */
				
				if (util.isNullOrEmpty(name)) {
					this.tui.toast('请输入昵称');
					return
				}
				
				//
				uni.request({
					url: this.$apiUrl+ '/api/user/baseInfoEdit',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						name: name,
						email: email
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							this.tui.toast("修改成功", 2000, true);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/base-info'
								});
							}, 2000);
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
		},
		
		onLoad: function(options) {
			this.getMyBaseInfo();
		},
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	page {
		background: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44upx;
	}

	.tui-photo {
		height: 138upx;
		width: 138upx;
		display: block;
		margin: 10upx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 100%;
		height: 40upx;
		font-size: 30upx;
		color: #fff;
		margin: 36upx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 346upx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 128upx 104upx 0 104upx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32upx;
		flex: 1;
		display: inline-block;
		padding-left: 32upx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27upx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tui-line-cell-2 {
		padding: 27upx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		margin-top:100rpx;
	}

	.tui-line-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28upx;
	}

	.tui-btn-class {
		width: 196upx !important;
		height: 54upx !important;
		border-radius: 27upx !important;
		font-size: 28upx !important;
		padding: 0 !important;
		line-height: 54upx !important;
	}

	.tui-btn-submit {
		margin-top: 100upx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24upx;
		text-align: center;
		width: 100%;
		margin-top: 29upx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>